<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/main}">
<head>
    <title>销售记录详情</title>
</head>
<body>
    <div layout:fragment="title">销售记录详情</div>
    
    <div layout:fragment="content">
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <!-- 操作按钮 -->
                <div class="d-flex justify-content-between mb-3">
                    <a th:href="@{/sales}" class="btn btn-secondary">
                        <i class="bi bi-arrow-left"></i> 返回列表
                    </a>
                    <button class="btn btn-danger" th:attr="onclick='confirmDelete(\'' + ${sale.id} + '\',\'' + ${sale.product.name} + '\',\'' + ${sale.quantity} + '\')'">
                        <i class="bi bi-trash"></i> 删除记录
                    </button>
                </div>
                
                <!-- 销售记录详情卡片 -->
                <div class="card shadow mb-4">
                    <div class="card-header bg-warning text-dark d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">销售记录详情</h5>
                        <span class="badge bg-dark text-white" th:text="${'ID: ' + sale.id}">ID: 1</span>
                    </div>
                    <div class="card-body">
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <h6 class="text-muted">商品信息</h6>
                                <table class="table table-borderless">
                                    <tr>
                                        <th style="width: 35%">商品名称:</th>
                                        <td>
                                            <a th:href="@{'/products/detail/' + ${sale.product.id}}" 
                                               th:text="${sale.product.name}" 
                                               class="text-decoration-none">商品名称</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>商品分类:</th>
                                        <td th:text="${sale.product.category}">分类</td>
                                    </tr>
                                    <tr>
                                        <th>客户:</th>
                                        <td th:text="${sale.customer ?: '-'}">客户</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <h6 class="text-muted">交易信息</h6>
                                <table class="table table-borderless">
                                    <tr>
                                        <th style="width: 35%">销售日期:</th>
                                        <td th:text="${#temporals.format(sale.saleDate, 'yyyy-MM-dd HH:mm:ss')}">
                                            2023-01-01 12:00:00
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>支付方式:</th>
                                        <td th:text="${sale.paymentType}">现金</td>
                                    </tr>
                                    <tr>
                                        <th>操作员:</th>
                                        <td th:text="${sale.user.username}">admin</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        
                        <!-- 数量价格信息卡片 -->
                        <div class="card bg-light mb-4">
                            <div class="card-body">
                                <div class="row text-center">
                                    <div class="col-md-3">
                                        <h5 class="card-title" th:text="${sale.quantity + ' ' + sale.product.unit}">10 个</h5>
                                        <p class="card-text text-muted">销售数量</p>
                                    </div>
                                    <div class="col-md-3">
                                        <h5 class="card-title" th:text="${#numbers.formatDecimal(sale.price, 1, 2) + ' 元'}">20.00 元</h5>
                                        <p class="card-text text-muted">单价</p>
                                    </div>
                                    <div class="col-md-3">
                                        <h5 class="card-title text-primary" th:text="${#numbers.formatDecimal(sale.totalAmount, 1, 2) + ' 元'}">200.00 元</h5>
                                        <p class="card-text text-muted">总金额</p>
                                    </div>
                                    <div class="col-md-3">
                                        <h5 class="card-title" th:text="${#numbers.formatDecimal(sale.profit, 1, 2) + ' 元'}" 
                                            th:class="${sale.profit > 0 ? 'card-title text-success' : 'card-title text-danger'}">
                                            50.00 元
                                        </h5>
                                        <p class="card-text text-muted">利润</p>
                                    </div>
                                </div>
                                <div class="row mt-3" th:if="${sale.profit < 0}">
                                    <div class="col-12">
                                        <div class="alert alert-danger mb-0 py-2 text-center">
                                            <i class="bi bi-exclamation-triangle-fill"></i> 
                                            注意：此销售记录为亏损销售！
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 备注信息 -->
                        <div class="mb-0">
                            <h6 class="text-muted">备注</h6>
                            <div class="p-3 bg-light rounded">
                                <p class="mb-0" th:text="${sale.remark ?: '无备注信息'}">备注信息</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 商品其他销售记录 -->
                <div class="card shadow">
                    <div class="card-header bg-light">
                        <h6 class="mb-0">同商品其他销售记录</h6>
                    </div>
                    <div class="card-body">
                        <div th:if="${#lists.isEmpty(productSales) || productSales.size() <= 1}" class="text-center py-3">
                            <p class="text-muted">该商品没有其他销售记录</p>
                        </div>
                        <div th:if="${!#lists.isEmpty(productSales) && productSales.size() > 1}" class="table-responsive">
                            <table class="table table-sm table-hover">
                                <thead class="table-light">
                                    <tr>
                                        <th>日期</th>
                                        <th>数量</th>
                                        <th>单价(元)</th>
                                        <th>总额(元)</th>
                                        <th>利润(元)</th>
                                        <th>客户</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:each="record : ${productSales}" th:if="${record.id != sale.id}">
                                        <td th:text="${#temporals.format(record.saleDate, 'yyyy-MM-dd HH:mm')}">
                                            2023-01-01 12:00
                                        </td>
                                        <td th:text="${record.quantity + ' ' + sale.product.unit}">10 个</td>
                                        <td th:text="${#numbers.formatDecimal(record.price, 1, 2)}">20.00</td>
                                        <td th:text="${#numbers.formatDecimal(record.totalAmount, 1, 2)}">200.00</td>
                                        <td>
                                            <span th:text="${#numbers.formatDecimal(record.profit, 1, 2)}"
                                                  th:class="${record.profit > 0 ? 'text-success' : 'text-danger'}">
                                                50.00
                                            </span>
                                        </td>
                                        <td th:text="${record.customer ?: '-'}">客户</td>
                                        <td>
                                            <a th:href="@{'/sales/detail/' + ${record.id}}" class="btn btn-sm btn-info">
                                                <i class="bi bi-eye"></i>
                                            </a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 删除确认模态框 -->
        <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p>您确定要删除该销售记录吗？</p>
                        <p>商品：<span id="productName"></span></p>
                        <p>数量：<span id="quantity"></span></p>
                        <div class="alert alert-warning" role="alert">
                            <i class="bi bi-exclamation-triangle-fill"></i> 注意：删除此记录将会增加相应商品的库存数量！此操作无法撤销。
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <a href="#" id="confirmDeleteBtn" class="btn btn-danger">确认删除</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div layout:fragment="page_scripts">
        <script>
            function confirmDelete(id, productName, quantity) {
                document.getElementById('productName').textContent = productName;
                document.getElementById('quantity').textContent = quantity;
                document.getElementById('confirmDeleteBtn').href = '/inventory/sales/delete/' + id;
                var deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
                deleteModal.show();
            }
        </script>
    </div>
</body>
</html> 